<template>
  <div class="good">
    <van-tabs v-model:active="active">
      <van-tab v-for="(item, index) in tabList" :title="item.category_name">
        <section>
          <span>价格排序：</span>
          <span @click="up">升序</span>
          <span @click="down">降序</span>
        </section>
        <div class="count">
          <my-good
            v-for="(item, index) in showList"
            :key="index"
            :itemObj="item"
            @click="$router.push(`/detail/${item.product_id}`)"
          ></my-good>
        </div>
      </van-tab>
    </van-tabs>
    <i class="iconfont icon-huidaodingbu" v-show="isBack" @click="goTop"></i>
  </div>
</template>

<script>
import { ref, reactive, toRefs, watch, onMounted} from "vue";
import api from "../api/index";
import myGood from "../components/myGood.vue";
export default {
  components: { myGood },
  setup() {
    const active = ref(0); // tab 切换选中的数据
    const data = reactive({
      tabList: [], // tab 切换的数据
      showList: [], // 展示的商品的数据
      isBack: false, // 是否显示回到顶部
    });
    api.post("/product/getCategory").then((res) => {
      data.tabList = res.category;
      data.tabList.unshift({ category_id: 0, category_name: "全部" });
      // console.log(data.tabList);
    });
    // const 没有变量提升
    const getList = (val) => {
      let obj = {
        categoryID: [val], // 需要传入的id集合
        currentPage: 1, // 拿第一个的数据
        pageSize: 15, // 数据需要15条
      };
      let URL = val == 0? '/product/getAllProduct' : '/product/getProductByCategory'
      api.post(URL, obj).then((res) => {
        data.showList = res.Product;
      });
    };
    getList(0); // 进入页面调用函数拿到所有的数据
    watch(active,(newVal)=>{ // 监听 active 的变化
      getList(newVal);
    })

    const up = () => { // 升序的函数
      // sort 数组的排序
      data.showList.sort((a,b) => a.product_selling_price - b.product_selling_price);
    }
    
    const down = () => {
        data.showList.sort((a,b) => b.product_selling_price - a.product_selling_price);
    }

    let dom = null; // 滚动容器
    let topNum = 0; // 滚动距离
    const scroll = (e) => { // 滚动事件
        topNum = e.target.scrollTop;
        // if(topNum>400){
        //    data.isBack = true
        // } else{
        //    data.isBack = false
        // }
        data.isBack = topNum>400;
    }
    // onMounted 是vue3的生命周期
    onMounted(() => { // 给组件里面的滚动元素绑定 scroll 事件
      dom = document.querySelector('.van-tabs__content');
      dom.onscroll = scroll
    })
    const goTop = () => { // 返回顶部的动画
       let time = setInterval(() => {
           if (topNum<=0){
              clearInterval(time);
           } else {
               topNum=topNum-50;
             dom.scrollTop = topNum;
           }
       },10);
    }
    return {
      active,
      ...toRefs(data),
      up,
      down,
      scroll,
      goTop
    };
  },
};
</script>
<style lang="scss" scoped>
section {
  font-size: 14px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.count {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10px;
}
.van-tabs {
  height: 100%;
}
:deep(.van-tabs__content) {
  height: calc(100% - 44px);
  overflow: auto;
}
.iconfont{
  position: fixed;
  bottom: 100px;
  right: 10px;
  font-size: 50px;
  color: red;
  z-index: 99;
}
</style>